<script lang="ts" setup>
import type { TablePaginationConfig, DrawerProps } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import type { TableColumnType, TableProps, SelectProps } from 'ant-design-vue';
import { $t } from '@vben/locales';

import type { WechatopenMiniappUsers, WechatopenMiniappUsersResponse } from './types.ts';
import type { ComponentSetting, ComponentSettingResponse } from '../../uctoo/component_setting/types.ts';
import { onMounted, reactive, ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import editform from './editform.vue';
import { useRoute } from 'vue-router';
import { removeEmpty } from '#/utils/common';
import { uctoo_wechatopen_miniapp_users, uctoo_component_setting } from '#/store';
import { useRepo } from 'pinia-orm';
import { useAxiosRepo } from '@pinia-orm/axios';
import { buildPrismaWhere } from '#/utils/prismaUtils';

type Key = string | number;

// 获取当前路由信息
const route = useRoute();
// 获取查询字符串部分
let queryParam = reactive({ ...route.query });
const componentSettingData = ref<ComponentSetting[]>([]);
const activeKey = ref(['']); // 默认折叠面板关闭
const isCollapsed = computed(() => activeKey.value.includes('1')); // 用于控制按钮文本
let componentSettingQueryParam = ref("uctoo_wechatopen_miniapp_users");
const columnsData = [
{ dataIndex: 'id', key: 'id', title: $t('database_column.uctoo.wechatopen_miniapp_users.id'), resizable: true },
{ dataIndex: 'user_id', key: 'user_id', title: $t('database_column.uctoo.wechatopen_miniapp_users.user_id'), resizable: true },
{ dataIndex: 'ai_user_id', key: 'ai_user_id', title: $t('database_column.uctoo.wechatopen_miniapp_users.ai_user_id'), resizable: true },
{ dataIndex: 'appid', key: 'appid', title: $t('database_column.uctoo.wechatopen_miniapp_users.appid'), resizable: true },
{ dataIndex: 'openid', key: 'openid', title: $t('database_column.uctoo.wechatopen_miniapp_users.openid'), resizable: true },
{ dataIndex: 'unionid', key: 'unionid', title: $t('database_column.uctoo.wechatopen_miniapp_users.unionid'), resizable: true },
{ dataIndex: 'nickname', key: 'nickname', title: $t('database_column.uctoo.wechatopen_miniapp_users.nickname'), resizable: true },
{ dataIndex: 'phone_number', key: 'phone_number', title: $t('database_column.uctoo.wechatopen_miniapp_users.phone_number'), resizable: true },
{ dataIndex: 'pure_phone_number', key: 'pure_phone_number', title: $t('database_column.uctoo.wechatopen_miniapp_users.pure_phone_number'), resizable: true },
{ dataIndex: 'country_code', key: 'country_code', title: $t('database_column.uctoo.wechatopen_miniapp_users.country_code'), resizable: true },
{ dataIndex: 'password', key: 'password', title: $t('database_column.uctoo.wechatopen_miniapp_users.password'), resizable: true },
{ dataIndex: 'gender', key: 'gender', title: $t('database_column.uctoo.wechatopen_miniapp_users.gender'), resizable: true },
{ dataIndex: 'city', key: 'city', title: $t('database_column.uctoo.wechatopen_miniapp_users.city'), resizable: true },
{ dataIndex: 'province', key: 'province', title: $t('database_column.uctoo.wechatopen_miniapp_users.province'), resizable: true },
{ dataIndex: 'country', key: 'country', title: $t('database_column.uctoo.wechatopen_miniapp_users.country'), resizable: true },
{ dataIndex: 'avatar_url', key: 'avatar_url', title: $t('database_column.uctoo.wechatopen_miniapp_users.avatar_url'), resizable: true },
{ dataIndex: 'language', key: 'language', title: $t('database_column.uctoo.wechatopen_miniapp_users.language'), resizable: true },
{ dataIndex: 'subscribe', key: 'subscribe', title: $t('database_column.uctoo.wechatopen_miniapp_users.subscribe'), resizable: true },
{ dataIndex: 'subscribe_time', key: 'subscribe_time', title: $t('database_column.uctoo.wechatopen_miniapp_users.subscribe_time'), resizable: true },
{ dataIndex: 'remark', key: 'remark', title: $t('database_column.uctoo.wechatopen_miniapp_users.remark'), resizable: true },
{ dataIndex: 'tagid_list', key: 'tagid_list', title: $t('database_column.uctoo.wechatopen_miniapp_users.tagid_list'), resizable: true },
{ dataIndex: 'subscribe_scene', key: 'subscribe_scene', title: $t('database_column.uctoo.wechatopen_miniapp_users.subscribe_scene'), resizable: true },
{ dataIndex: 'qr_scene', key: 'qr_scene', title: $t('database_column.uctoo.wechatopen_miniapp_users.qr_scene'), resizable: true },
{ dataIndex: 'qr_scene_str', key: 'qr_scene_str', title: $t('database_column.uctoo.wechatopen_miniapp_users.qr_scene_str'), resizable: true },
{ dataIndex: 'privilege', key: 'privilege', title: $t('database_column.uctoo.wechatopen_miniapp_users.privilege'), resizable: true },
{ dataIndex: 'loginip', key: 'loginip', title: $t('database_column.uctoo.wechatopen_miniapp_users.loginip'), resizable: true },
{ dataIndex: 'token', key: 'token', title: $t('database_column.uctoo.wechatopen_miniapp_users.token'), resizable: true },
{ dataIndex: 'access_token', key: 'access_token', title: $t('database_column.uctoo.wechatopen_miniapp_users.access_token'), resizable: true },
{ dataIndex: 'access_token_overtime', key: 'access_token_overtime', title: $t('database_column.uctoo.wechatopen_miniapp_users.access_token_overtime'), resizable: true },
{ dataIndex: 'session_key', key: 'session_key', title: $t('database_column.uctoo.wechatopen_miniapp_users.session_key'), resizable: true },
{ dataIndex: 'verification', key: 'verification', title: $t('database_column.uctoo.wechatopen_miniapp_users.verification'), resizable: true },
{ dataIndex: 'ai_user_info', key: 'ai_user_info', title: $t('database_column.uctoo.wechatopen_miniapp_users.ai_user_info'), resizable: true },
{ dataIndex: 'status', key: 'status', title: $t('database_column.uctoo.wechatopen_miniapp_users.status'), resizable: true },
{ dataIndex: 'creator', key: 'creator', title: $t('database_column.uctoo.wechatopen_miniapp_users.creator'), resizable: true },
{ dataIndex: 'created_at', key: 'created_at', title: $t('database_column.uctoo.wechatopen_miniapp_users.created_at'), resizable: true },
{ dataIndex: 'updated_at', key: 'updated_at', title: $t('database_column.uctoo.wechatopen_miniapp_users.updated_at'), resizable: true },
{ dataIndex: 'deleted_at', key: 'deleted_at', title: $t('database_column.uctoo.wechatopen_miniapp_users.deleted_at'), resizable: true },
{ dataIndex: 'refresh_token', key: 'refresh_token', title: $t('database_column.uctoo.wechatopen_miniapp_users.refresh_token'), resizable: true },
{ dataIndex: 'action', key: 'action', fixed: 'right' as 'right', title:$t('operate')  },
];
const columns = ref<TableColumnsType>(columnsData);

const selectedColumns = ref(
  (columns.value as any[])
    .filter((col) => 'dataIndex' in col)
    .map(col => col.dataIndex)
);

const handleColumnChange = () => {}; 
let filteredColumns = computed(() => {
  return (columns.value as any[]).filter((col) => {
    return 'dataIndex' in col && selectedColumns.value.includes(col.dataIndex as string);
  }) as TableColumnsType;
});
const dataSource = ref<WechatopenMiniappUsers[]>([]);
const loading = ref(false);
const pagination = reactive<TablePaginationConfig>({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
});

const modalVisible = ref(false);
const modalMode = ref<'add' | 'edit'>('add');
const currentRecord = ref<WechatopenMiniappUsers | null>(null);
const isRecycleBin = ref(false);
const checkedHardDelete = ref(false); 

// 定义搜索表单的接口
interface SearchFormState {
id:string | null;
user_id:string | null;
ai_user_id:string | null;
appid:string | null;
openid:string | null;
unionid:string | null;
nickname:string | null;
phone_number:string | null;
pure_phone_number:string | null;
country_code:string | null;
password:string | null;
gender:number | null;
city:string | null;
province:string | null;
country:string | null;
avatar_url:string | null;
language:string | null;
subscribe:number | null;
subscribe_time:Date | null;
remark:string | null;
tagid_list:string | null;
subscribe_scene:string | null;
qr_scene:string | null;
qr_scene_str:string | null;
privilege:string | null;
loginip:string | null;
token:string | null;
access_token:string | null;
access_token_overtime:Date | null;
session_key:string | null;
verification:string | null;
ai_user_info:string | null;
status:number | null;
creator:string | null;
created_at: [string, string] | null;
updated_at: [string, string] | null;
deleted_at: [string, string] | null;
refresh_token:string | null;
}

// 修改 searchForm 的定义，添加类型
const searchForm = reactive<SearchFormState>({
id: null,
user_id: null,
ai_user_id: null,
appid: null,
openid: null,
unionid: null,
nickname: null,
phone_number: null,
pure_phone_number: null,
country_code: null,
password: null,
gender: null,
city: null,
province: null,
country: null,
avatar_url: null,
language: null,
subscribe: null,
subscribe_time: null,
remark: null,
tagid_list: null,
subscribe_scene: null,
qr_scene: null,
qr_scene_str: null,
privilege: null,
loginip: null,
token: null,
access_token: null,
access_token_overtime: null,
session_key: null,
verification: null,
ai_user_info: null,
status: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
refresh_token: null,
});

interface SearchOperatorState {
id: string | null;
user_id: string | null;
ai_user_id: string | null;
appid: string | null;
openid: string | null;
unionid: string | null;
nickname: string | null;
phone_number: string | null;
pure_phone_number: string | null;
country_code: string | null;
password: string | null;
gender: string | null;
city: string | null;
province: string | null;
country: string | null;
avatar_url: string | null;
language: string | null;
subscribe: string | null;
subscribe_time: string | null;
remark: string | null;
tagid_list: string | null;
subscribe_scene: string | null;
qr_scene: string | null;
qr_scene_str: string | null;
privilege: string | null;
loginip: string | null;
token: string | null;
access_token: string | null;
access_token_overtime: string | null;
session_key: string | null;
verification: string | null;
ai_user_info: string | null;
status: string | null;
creator: string | null;
created_at: string | null;
updated_at: string | null;
deleted_at: string | null;
refresh_token: string | null;
}

const SearchOperator = reactive<SearchOperatorState>({
id: null,
user_id: null,
ai_user_id: null,
appid: null,
openid: null,
unionid: null,
nickname: null,
phone_number: null,
pure_phone_number: null,
country_code: null,
password: null,
gender: null,
city: null,
province: null,
country: null,
avatar_url: null,
language: null,
subscribe: null,
subscribe_time: null,
remark: null,
tagid_list: null,
subscribe_scene: null,
qr_scene: null,
qr_scene_str: null,
privilege: null,
loginip: null,
token: null,
access_token: null,
access_token_overtime: null,
session_key: null,
verification: null,
ai_user_info: null,
status: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
refresh_token: null,
});


const ORDEROPTIONS = ['id','user_id','ai_user_id','appid','openid','unionid','nickname','phone_number','pure_phone_number','country_code','password','gender','city','province','country','avatar_url','language','subscribe','subscribe_time','remark','tagid_list','subscribe_scene','qr_scene','qr_scene_str','privilege','loginip','token','access_token','access_token_overtime','session_key','verification','ai_user_info','status','creator','created_at','updated_at','deleted_at','refresh_token',];


const SearchOperatorOptions = ref<SelectProps['options']>([
  { value: 'equals', label: '='},{value: 'not', label: '!='},{value: 'lt',label: '<' },
  { value: 'lte', label: '<='  },{value: 'gt',  label: '>' },{value: 'gte',label: '>=' },
  { value: 'in',  label: 'in'  },{value: 'contains', label: `${$t('page.contains')}` }]);
const selectedAscItems = ref<string[]>([]);
const selectedDescItems = ref<string[]>([]);

const availableOptions = computed(() => {
  return ORDEROPTIONS
    .filter(option => 
      !selectedAscItems.value.includes(option) && 
      !selectedDescItems.value.includes(option)
    )
    .map(option => ({ value: option }));
});

// 计算属性，用于生成 queryParamSort 字符串
const queryParamSort = computed(() => {
  const ascItems = selectedAscItems.value.map(item => item).join(',');
  const descItems = selectedDescItems.value.map(item => `-${item}`).join(',');
  return `${[ascItems, descItems].filter(Boolean).join(',')}`;
});

const resetSearch = () => {
searchForm.id=null;
searchForm.user_id=null;
searchForm.ai_user_id=null;
searchForm.appid=null;
searchForm.openid=null;
searchForm.unionid=null;
searchForm.nickname=null;
searchForm.phone_number=null;
searchForm.pure_phone_number=null;
searchForm.country_code=null;
searchForm.password=null;
searchForm.gender=null;
searchForm.city=null;
searchForm.province=null;
searchForm.country=null;
searchForm.avatar_url=null;
searchForm.language=null;
searchForm.subscribe=null;
searchForm.subscribe_time=null;
searchForm.remark=null;
searchForm.tagid_list=null;
searchForm.subscribe_scene=null;
searchForm.qr_scene=null;
searchForm.qr_scene_str=null;
searchForm.privilege=null;
searchForm.loginip=null;
searchForm.token=null;
searchForm.access_token=null;
searchForm.access_token_overtime=null;
searchForm.session_key=null;
searchForm.verification=null;
searchForm.ai_user_info=null;
searchForm.status=null;
searchForm.creator=null;
searchForm.created_at = null;
searchForm.updated_at = null;
searchForm.deleted_at = null;
searchForm.refresh_token=null;

  pagination.current = 1;
  searchStatus.value = false;
  queryParam.filter = null;
  fetchData();
};


const searchStatus = ref(false);
const handleSearch = () => {
  pagination.current = 1;
  searchStatus.value = true;
  fetchData();
};
const fetchData = async () => {
  loading.value = true;
  try {
    // 构建查询参数
    let params: Record<string, any> = {};
    if(searchStatus.value){
         if (searchForm.id) params.id =  searchForm.id ;
   if (searchForm.user_id) params.user_id =  searchForm.user_id ;
   if (searchForm.ai_user_id) params.ai_user_id =  searchForm.ai_user_id ;
   if (searchForm.appid) params.appid =  searchForm.appid ;
   if (searchForm.openid) params.openid =  searchForm.openid ;
   if (searchForm.unionid) params.unionid =  searchForm.unionid ;
   if (searchForm.nickname) params.nickname =  searchForm.nickname ;
   if (searchForm.phone_number) params.phone_number =  searchForm.phone_number ;
   if (searchForm.pure_phone_number) params.pure_phone_number =  searchForm.pure_phone_number ;
   if (searchForm.country_code) params.country_code =  searchForm.country_code ;
   if (searchForm.password) params.password =  searchForm.password ;
   if (searchForm.gender) params.gender =  Number(searchForm.gender) ;
   if (searchForm.city) params.city =  searchForm.city ;
   if (searchForm.province) params.province =  searchForm.province ;
   if (searchForm.country) params.country =  searchForm.country ;
   if (searchForm.avatar_url) params.avatar_url =  searchForm.avatar_url ;
   if (searchForm.language) params.language =  searchForm.language ;
   if (searchForm.subscribe) params.subscribe =  Number(searchForm.subscribe) ;
   if (searchForm.subscribe_time) params.subscribe_time =  searchForm.subscribe_time ;
   if (searchForm.remark) params.remark =  searchForm.remark ;
   if (searchForm.tagid_list) params.tagid_list =  searchForm.tagid_list ;
   if (searchForm.subscribe_scene) params.subscribe_scene =  searchForm.subscribe_scene ;
   if (searchForm.qr_scene) params.qr_scene =  searchForm.qr_scene ;
   if (searchForm.qr_scene_str) params.qr_scene_str =  searchForm.qr_scene_str ;
   if (searchForm.privilege) params.privilege =  searchForm.privilege ;
   if (searchForm.loginip) params.loginip =  searchForm.loginip ;
   if (searchForm.token) params.token =  searchForm.token ;
   if (searchForm.access_token) params.access_token =  searchForm.access_token ;
   if (searchForm.access_token_overtime) params.access_token_overtime =  searchForm.access_token_overtime ;
   if (searchForm.session_key) params.session_key =  searchForm.session_key ;
   if (searchForm.verification) params.verification =  searchForm.verification ;
   if (searchForm.ai_user_info) params.ai_user_info =  searchForm.ai_user_info ;
   if (searchForm.status) params.status =  Number(searchForm.status) ;
   if (searchForm.creator) params.creator =  searchForm.creator ;
   if (searchForm.created_at) params.created_at = searchForm.created_at;
   if (searchForm.updated_at) params.updated_at = searchForm.updated_at;
   if (searchForm.deleted_at) params.deleted_at = searchForm.deleted_at;
   if (searchForm.refresh_token) params.refresh_token =  searchForm.refresh_token ;


       const where = buildPrismaWhere(params, SearchOperator);
       queryParam.filter = JSON.stringify(where);
    }else{  //后台地址跳转查询场景，从url获取查询参数
      // 获取查询字符串部分
    }
    if(queryParamSort.value){
      queryParam.sort = queryParamSort.value;
    }
    // 根据回收站状态动态修改条件
    if (isRecycleBin.value) {
      // 添加到回收站：要求 deleted_at 不为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { not: null }
      });
    } else {
      // 不在回收站：要求 deleted_at 为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { equals: null }
      });
    }
    const result = await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().getuctooWechatopenMiniappUsersList(
      (pagination.current || 1) - 1, 
      pagination.pageSize || 10,
      queryParam);
    const res = result.response.data as unknown as WechatopenMiniappUsersResponse;
    dataSource.value = isRecycleBin.value
      ? res.wechatopenMiniappUserss.filter((wechatopenMiniappUsers) => wechatopenMiniappUsers.deleted_at !== null)
      : res.wechatopenMiniappUserss.filter((wechatopenMiniappUsers) => wechatopenMiniappUsers.deleted_at === null);
    pagination.total = res.totalCount;
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
  //查询控件配置
  try {
    // 构建查询参数
    const params: Record<string, any> = {};
    params.filter = JSON.stringify({"table_name":{"equals":componentSettingQueryParam.value}});
    const result = await useAxiosRepo(uctoo_component_setting).api().getuctooComponentSettingList(
      0,
      10,
      params,
    );
    const res = result.response.data as unknown as ComponentSettingResponse;
    componentSettingData.value = res.componentSettings;
    if(componentSettingData.value[0]){
      selectedColumns.value = JSON.parse(componentSettingData.value[0].selected_table_column ?? '[]');
    }
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
};

const handleTableChange = (pag: TablePaginationConfig) => {
  pagination.current = pag.current || 1;
  pagination.pageSize = pag.pageSize || 10;
  fetchData();
};

const handleAdd = () => {
  modalMode.value = 'add';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleRecyle = (checked: boolean) => {
  console.log(checked);
  pagination.current = 1;
  isRecycleBin.value = checked;
  fetchData();
};

const handleRestore = async (record: WechatopenMiniappUsers) => {
  try {
    await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().edituctooWechatopenMiniappUsers({ deleted_at: '0', id: record.id });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleMultiRestore = async () => {
  try {
    await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().edituctooWechatopenMiniappUsers({ deleted_at: '0', ids: JSON.stringify(rowSelectState.selectedRowKeys) });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleEdit = (record: WechatopenMiniappUsers) => {
  modalMode.value = 'edit';
  currentRecord.value = record;
  modalVisible.value = true;
};

const handleMultiEdit = () => {
  modalMode.value = 'edit';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleDelete = async (record: WechatopenMiniappUsers) => {
  try {
    if(checkedHardDelete){
      await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().deleteuctooWechatopenMiniappUsers({id:record.id, force:1});
    }else{
      await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().deleteuctooWechatopenMiniappUsers({id:record.id});
    }
    checkedHardDelete.value = false;
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleMultiDelete = async () => {
  try {
    await useAxiosRepo(uctoo_wechatopen_miniapp_users).api().deleteuctooWechatopenMiniappUsers({ids: JSON.stringify(rowSelectState.selectedRowKeys)});
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleSuccess = () => {
  modalVisible.value = false;
  fetchData();
};

const rowSelectState = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
const hasSelected = computed(() => rowSelectState.selectedRowKeys.length > 0);

const onSelectChange = (selectedRowKeys: Key[]) => {
  rowSelectState.selectedRowKeys = selectedRowKeys;
};


const placement = ref<DrawerProps['placement']>('left');
const open = ref<boolean>(false);

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

const onSetting = async () => {
    try {
      if(componentSettingData.value[0]){
        componentSettingData.value[0].selected_table_column = JSON.stringify(selectedColumns.value);
      }
      await useAxiosRepo(uctoo_component_setting).api().edituctooComponentSetting(removeEmpty(componentSettingData.value[0]));
        message.success($t('page.SettingSuccess'));
    } catch {
      message.error($t('page.SettingFailed'));
    }
  open.value = false;
};

const handleResizeColumn = (w:number, col:{ width: number }) => {
  col.width = w;
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="p-4">
    <a-card :bordered="false">
    <!-- 搜索表单 -->
    <a-form layout="inline" class="mb-4 flex flex-wrap gap-4">
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.id')">
          <a-input
            v-model:value="searchForm.id"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.user_id')">
          <a-input
            v-model:value="searchForm.user_id"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.user_id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.user_id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.ai_user_id')">
          <a-input
            v-model:value="searchForm.ai_user_id"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.ai_user_id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.ai_user_id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>

        <!-- 折叠面板，包含更多控件 -->
    <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end" :ghost="true">
      <a-collapse-panel key="1" :header="isCollapsed ? $t('page.Expand'): $t('page.Collapse')" >
          <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.appid')">
          <a-input
            v-model:value="searchForm.appid"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.appid')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.appid" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.openid')">
          <a-input
            v-model:value="searchForm.openid"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.openid')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.openid" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.unionid')">
          <a-input
            v-model:value="searchForm.unionid"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.unionid')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.unionid" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.nickname')">
          <a-input
            v-model:value="searchForm.nickname"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.nickname')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.nickname" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.phone_number')">
          <a-input
            v-model:value="searchForm.phone_number"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.phone_number')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.phone_number" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.pure_phone_number')">
          <a-input
            v-model:value="searchForm.pure_phone_number"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.pure_phone_number')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.pure_phone_number" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.country_code')">
          <a-input
            v-model:value="searchForm.country_code"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.country_code')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.country_code" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.password')">
          <a-input
            v-model:value="searchForm.password"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.password')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.password" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.gender')">
          <a-input
            v-model:value="searchForm.gender"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.gender')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.gender" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.city')">
          <a-input
            v-model:value="searchForm.city"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.city')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.city" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.province')">
          <a-input
            v-model:value="searchForm.province"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.province')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.province" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.country')">
          <a-input
            v-model:value="searchForm.country"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.country')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.country" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.avatar_url')">
          <a-input
            v-model:value="searchForm.avatar_url"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.avatar_url')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.avatar_url" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.language')">
          <a-input
            v-model:value="searchForm.language"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.language')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.language" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe')">
          <a-input
            v-model:value="searchForm.subscribe"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.subscribe" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe_time')">
          <a-input
            v-model:value="searchForm.subscribe_time"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe_time')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.subscribe_time" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.remark')">
          <a-input
            v-model:value="searchForm.remark"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.remark')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.remark" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.tagid_list')">
          <a-input
            v-model:value="searchForm.tagid_list"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.tagid_list')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.tagid_list" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe_scene')">
          <a-input
            v-model:value="searchForm.subscribe_scene"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.subscribe_scene')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.subscribe_scene" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.qr_scene')">
          <a-input
            v-model:value="searchForm.qr_scene"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.qr_scene')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.qr_scene" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.qr_scene_str')">
          <a-input
            v-model:value="searchForm.qr_scene_str"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.qr_scene_str')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.qr_scene_str" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.privilege')">
          <a-input
            v-model:value="searchForm.privilege"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.privilege')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.privilege" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.loginip')">
          <a-input
            v-model:value="searchForm.loginip"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.loginip')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.loginip" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.token')">
          <a-input
            v-model:value="searchForm.token"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.token')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.token" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.access_token')">
          <a-input
            v-model:value="searchForm.access_token"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.access_token')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.access_token" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.access_token_overtime')">
          <a-input
            v-model:value="searchForm.access_token_overtime"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.access_token_overtime')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.access_token_overtime" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.session_key')">
          <a-input
            v-model:value="searchForm.session_key"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.session_key')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.session_key" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.verification')">
          <a-input
            v-model:value="searchForm.verification"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.verification')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.verification" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.ai_user_info')">
          <a-input
            v-model:value="searchForm.ai_user_info"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.ai_user_info')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.ai_user_info" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.status')">
          <a-input
            v-model:value="searchForm.status"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.status')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.status" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.creator')">
          <a-input
            v-model:value="searchForm.creator"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.creator')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.creator" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.created_at')">
            <a-select v-model:value="SearchOperator.created_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.created_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.created_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.updated_at')">
            <a-select v-model:value="SearchOperator.updated_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.updated_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.updated_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.deleted_at')">
            <a-select v-model:value="SearchOperator.deleted_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.deleted_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.deleted_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.wechatopen_miniapp_users.refresh_token')">
          <a-input
            v-model:value="searchForm.refresh_token"
            :placeholder="$t('database_column.uctoo.wechatopen_miniapp_users.refresh_token')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.refresh_token" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
 
        </a-collapse-panel>
      </a-collapse>
      <div class="mutually-exclusive-select">
    <a-select
      v-model:value="selectedAscItems"
      mode="multiple"
      :placeholder="$t('page.OrderASC')"
      style="width: 200px; margin-right: 8px"
      :options="availableOptions"
    ></a-select>
    <a-select
      v-model:value="selectedDescItems"
      mode="multiple"
      :placeholder="$t('page.OrderDESC')"
      style="width: 200px"
      :options="availableOptions"
    ></a-select>
  </div>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{$t('page.Search')}}</a-button>
            <a-button @click="resetSearch">{{$t('page.resetSearch')}}</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <div class="mb-4 flex items-center justify-between">
        <div>
          <a-switch
            v-model:checked="isRecycleBin"
            :checked-children="$t('page.RecycleBin')"
            :un-checked-children="$t('page.RecycleBin')"
            @change="handleRecyle"
          />
        </div>
        <div>
          
          
              <template v-if="isRecycleBin">
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiRestore">
                  {{$t('page.Restore')}}
                </a-button>
              </template>
              <template v-else>
                <a-space>
                <a-popconfirm :disabled="!hasSelected" :loading="rowSelectState.loading"
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleMultiDelete"
                >
                  <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading">
                    {{$t('page.Delete')}}
                  </a-button>
                </a-popconfirm>
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiEdit" >
                    {{$t('page.Edit')}}
                  </a-button>
                </a-space>
              </template>
        </div>
        <a-button type="primary" @click="showDrawer">{{$t('page.Setting')}}</a-button>
        <a-button type="primary" @click="handleAdd">{{$t('page.Add')}}</a-button>
      </div>
  <a-drawer :width="500" title="" :placement="placement" :open="open" @close="onClose">
    <template #extra>
      <a-button style="margin-right: 8px" @click="onClose">{{$t('page.Cancel')}}</a-button>
      <a-button type="primary" @click="onSetting">{{$t('page.Submit')}}</a-button>
    </template>
    <a-checkbox-group v-model:value="selectedColumns" @change="handleColumnChange">
      <a-row>
        <a-col v-for="col in columnsData" :key="col.dataIndex" :span="8">
          <a-checkbox :value="col.dataIndex">{{ col.title }}</a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </a-drawer>
      
      <a-table rowKey="id"
        :columns="filteredColumns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 'max-content'  }"
        @resizeColumn="handleResizeColumn"
        :row-selection="{ selectedRowKeys: rowSelectState.selectedRowKeys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <template v-if="isRecycleBin">
                <a class="hover:text-blue-500" @click="handleRestore(record)"
                  >{{$t('page.Restore')}}</a
                >
              </template>
              <template v-else>
                <a class="hover:text-blue-500" @click="handleEdit(record)"
                  >{{$t('page.Edit')}}</a
                >
                <a-popconfirm
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleDelete(record)"
                >
                <template #description>
                  <p>{{$t('page.checkedHardDelete')}}</p>
                  <a-checkbox v-model:checked="checkedHardDelete">{{$t('page.HardDelete')}}</a-checkbox>
                </template>
                
                  <a class="hover:text-blue-500">{{$t('page.Delete')}}</a>
                </a-popconfirm>
              </template>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <editform
      v-model:visible="modalVisible"
      :mode="modalMode"
      :record="currentRecord"
      :componentSettingData="componentSettingData"
      :ids="rowSelectState.selectedRowKeys as string[]"
      @success="handleSuccess"
    />
  </div>
</template>
